<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
            <el-breadcrumb-item>成绩列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="24">
                <el-col :span="1"><el-button type="text" style="color: black">专业</el-button></el-col>
                <el-col :span="5">
                    <el-select @change="majorChange" v-model.number="queryInfo.major_id" filterable placeholder="请选择专业">
                        <el-option v-for="item in majorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">年级</el-button></el-col>
                <el-col :span="3">
                    <el-select @change="gradeChange" v-model="queryInfo.grade_name" filterable placeholder="请选择年级">
                        <el-option v-for="item in gradeList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">班级</el-button></el-col>
                <el-col :span="3">
                    <el-select v-model.number="queryInfo.class_id" filterable placeholder="请选择班级">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">学期</el-button></el-col>
                <el-col :span="6">
                    <el-select v-model="queryInfo.semester_ids" multiple placeholder="请选择" filterable>
                        <el-option v-for="item in semesterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-search" @click="getScoreList">查询</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="scoreList"
                    border stripe
                    :header-cell-style="table_header"
                    empty-text="暂无数据"
            >
                <el-table-column type="index" label="排名" :index="getIndex" align="center" width="60px"></el-table-column>
                <el-table-column prop="stu_id" label="学号" align="center" width="120px"></el-table-column>
                <el-table-column prop="name" label="姓名" align="center" width="120px"></el-table-column>
                <el-table-column prop="mean" label="均分" align="center" width="100px"></el-table-column>
                <el-table-column prop="total" label="总分" align="center" width="100px"></el-table-column>
                <el-table-column prop="class_name" label="班级" align="center" width="100px"></el-table-column>
                <el-table-column label="专业" align="center" width="220px">
                    <template>{{majorMap[queryInfo.major_id]}}</template>
                </el-table-column>
                <el-table-column label="学期" align="center" width="180px">
                    <template>
                        <el-tag v-for="id in queryInfo.semester_ids" :key="id">{{semesterMap[id]}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
                    hide-on-single-page
            ></el-pagination>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                queryInfo: {
                    // 当前页数
                    pageNum: 1,
                    // 每页显示多少数据
                    pageSize: 10,
                    class_id: null,
                    grade_name: "2018级",
                    major_id: 1,
                    semester_ids: [5],
                },
                total: 0,

                scoreList: [],
                semesterList: [],
                classList: [],
                majorList: [],
                gradeList: [],
                majorMap: {},
                semesterMap: {},
            }
        },
        created() {
            this.getData();
        },
        methods: {
            table_header(row, column, rowIndex, columnIndex) {
                return 'background-color: #409EFF; color:white'
            },
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                this.getScoreList();
            },
            handleCurrentChange(newNum) {
                this.queryInfo.pageNum = newNum;
                this.getScoreList();
            },
            getIndex(index){
                return (index+1) + (this.queryInfo.pageNum-1)*this.queryInfo.pageSize
            },
            // 获取专业map
            async getMajorMap() {
                const { data: res, status: status } = await this.axios.get('major/getMajorMap');
                if (status !== 200) {
                    return this.$message.error('获取班级列表失败！')
                }
                this.majorMap = res.data;
            },
            async getSemesterMap() {
                const { data: res, status: status } = await this.axios.get('semester/getSemesterMap');
                if (status !== 200) {
                    return this.$message.error('获取班级列表失败！')
                }
                this.semesterMap = res.data;
            },
            async getScoreList() {
                if (this.queryInfo.semester_ids.length === 0) return this.$message.error("必须选择学期");
                var query_info = JSON.parse(JSON.stringify(this.queryInfo));
                if (query_info.semester_ids.constructor === Array) {
                    query_info.semester_ids = query_info.semester_ids.join(',');
                }
                const {data: res, status: status} = await this.axios.get('score/getScoreSummary', {params: query_info});
                if (status !== 200) return this.$message.error("获取成绩列表失败");
                this.scoreList = res.data.scores;
                this.total = res.data.total;
            },
            async getSemesterList() {
                const {data: res, status: status} = await this.axios.get("semester/getSemesterList");
                if (status !== 200) {
                    return this.$message.error('获取学期列表失败！')
                }
                this.semesterList = res.data.semesters;
                // this.queryInfo.semester_id = this.semesterList.slice(-1)[0].id
            },

            async getGradeList(){
                const {data: res, status: status} = await this.axios.get("grade/getRoleGrade");
                if (status !== 200) {
                    return this.$message.error('获取年级列表失败！')
                }
                this.gradeList = res.data;
                // this.queryInfo.grade_name = this.gradeList.slice(-1)[0];
            },

            async getMajorList(){
                const {data: res, status: status} = await this.axios.get("major/getRoleMajor");
                if (status !== 200) {
                    console.log(status);
                    return this.$message.error('获取专业列表失败！')
                }
                this.majorList = res.data;
                this.queryInfo.major_id = this.majorList.slice(0)[0].id;
            },

            async getData(){
                await this.getMajorMap();
                await this.getSemesterMap();
                this.getScoreList();
                this.getSemesterList();
                await this.getMajorList();
                await this.getGradeList();
                this.getClassList();
            },
            async getClassList(){
                const {data: res, status: status} = await this.axios.get('class/getMajorClass',
                    {params: {"major_id": this.queryInfo.major_id, "grade": this.queryInfo.grade_name}}
                );
                if (status !== 200) {
                    return this.$message.error('获取班级列表失败！')
                }
                this.classList = res.data;
            },
            async majorChange(major_id){
                await this.getClassList();
            },
            async gradeChange(value){
                await this.getClassList();
            }
        },
    }
</script>
<style lang="less" scope>
</style>